<template>
	<view>
		<view class="head">
			<view class="be" style="">
				<view class="swiperList">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true">
						<swiper-item v-for="item in titleList">
							<view class="swiper-item uni-bg-red">
								<image :src="item.avatarUrl" mode=""></image>
								<view class="ve">{{item.nickname}}成功邀请{{item.helpUserCount}}个人 获得{{item.discount}}折优惠</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="guize" @click="showModel = true">
					<view class="">活动规则</view>
					<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/9b518c0a8da74b96bcc4cd0a50a104fd.png" mode=""></image>
				</view>
			</view>
			<!-- <view ></view> -->
			<button type="" class="btn" open-type="share"></button>
		</view>
		<view class="yao"></view>
		<view class="list" v-for="(item, index) in List" :class="index % 2 == 0 ? '' : 'bgc'">
			<view class="one">
				<image :src="item.avatarUrl" mode=""></image>
				<view class="">{{ item.nickname }} {{ item.phone }}</view>
			</view>
			<view class=""></view>
		</view>
		<view class="meng" v-show="showModel" @click="showModel = false"></view>
		<view class="Model" v-show="showModel">
			<view class="tox"></view>
			<view class="me" @click="showModel = false"><image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/be51d71adcb4448d975fa21cbbdaa48e.png" mode=""></image></view>
		</view>
		<button type="primary" @click="goList()">立即支付</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			showModel: false,
			people: 12,
			List: '',
			titleList: ''
		};
	},
	onShow() {
		// this.$api.request('', '', {}).then(res => {
		//     uni.hideLoading();
		//     console.log(res);
		//    });
		//

		this.showNumber();
		this.showTitle();
		// this.people = uni.getStorageSync('oderNo');
		// this.people='3012021011413111009'
		// console.log(this.people);
	},
	onShareAppMessage() {
		return {
			title: '邀请好友助力',
			// imageUrl: this.goods.img,
			path: '/pagesA/order/invite?people=' + this.people
		};
	},
	methods: {
		showTitle() {
			uni.showLoading({
				title: '请稍后..',
				mask: true
			});
			this.$api.request('goods', 'getHelpSuccessUser', {}).then(res => {
				uni.hideLoading();
				console.log(res);
				this.titleList=res.data
			});
		},
		goList() {
			if (this.people == 0) {
				uni.showToast({
					title: '当前没有助力订单',
					icon: 'none'
				});
				return;
			}
			this.$api.request('order', 'userHelpOrderId', {}).then(res => {
				uni.hideLoading();
				console.log(res);
				uni.navigateTo({
					url: './detail?orderid=' + res.data
				});
			});
		},
		showNumber() {
			this.$api.request('order', 'userHaveHelpOrder', {}).then(res => {
				this.people = res.data;
				this.showAllList();
			});
		},
		showAllList() {
			this.$api
				.request('order','userHelpList', {
					orderNo: this.people
				})
				.then(res => {
					uni.hideLoading();
					console.log(res);
					this.List = res.data;
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f4f5;
	width: 100%;
	height: 100%;
}
.swiperList {
	width: 440rpx;
	height: 56rpx;
	background-color: #000000;
	opacity: 0.5;
	border-radius: 999rpx;
	color: #ffffff;
	.swiper {
		width: 100%;
		height: 100%;
		.swiper-item {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 24rpx;

			image {
				width: 56rpx;
				height: 56rpx;
				border-radius: 999rpx;
				margin-right: 9rpx;
			}
		}
	}
}
.be {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 28rpx;
}
.guize {
	width: 160rpx;
	height: 56rpx;
	background: #000000;
	border-radius: 200px 0px 0px 200px;
	opacity: 0.5;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 16rpx;
	box-sizing: border-box;
	justify-content: space-between;
	image {
		width: 24rpx;
		height: 24rpx;
	}
}
.head {
	height: 950rpx;
	background: url(https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/fd3295dafc984f1cb6061c5e30711de5.png) no-repeat center;
	background-size: 100% 100%;
	// padding-left: 28rpx;
	// display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	font-size: 24rpx;
	overflow: hidden;
	padding-top: 30rpx;
}
.btn {
	width: 638rpx;
	height: 100rpx;
	background: url(https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/1c33fbdb4d964d4987e137db390e94a5.png) no-repeat center;
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 400rpx;
	border: none;
}
button {
	border: none;
}
button::after {
	border: none;
}
.yao {
	width: 90%;
	height: 28rpx;
	margin: 0 auto;
	margin-top: 54rpx;
	background: url(https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/135a4c93034643a78398b23ca985b13f.png) no-repeat center;
	box-sizing: 100% 100%;
	margin-bottom: 24rpx;
}
.list {
	width: 95%;
	height: 92rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28rpx;
	box-sizing: border-box;

	font-size: 20rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
	.one {
		display: flex;
		align-items: center;

		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 999rpx;
			margin-right: 8rpx;
		}
	}
}
.bgc {
	background-color: #f3f4f5;
}
.meng {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2;
	background-color: #000;
	opacity: 0.5;
}
.Model {
	position: fixed;
	top: 164rpx;
	width: 90%;
	left: 5%;
	z-index: 10;
	.tox {
		height: 870rpx;
		width: 100%;
		background: url(https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/a8a01540e4964573a119c9ab8ad1b6a5.png) no-repeat center;
		box-sizing: 100% 100%;
	}
	.me {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 64rpx;
		image {
			width: 42rpx;
			height: 42rpx;
		}
	}
}
</style>
